<template>
  <div class="wangeditor">
    <div ref="editor"></div>
  </div>
</template>

<script>
import { onMounted, onBeforeUnmount, reactive, ref, toRefs } from "vue";
import WangEditor from "wangeditor";
export default {
  props: {
    content: {
      type: String,
      default: "请输入数据",
    },
  },
  setup( props,content ) {
    const editor = ref();

    let instance;
    onMounted(() => {
      instance = new WangEditor(editor.value);
      // 自定义菜单
      instance.config.menus = [
        "head",
        "bold",
        "fontsize",
        "fontName",
        "fontColor",
        "link",
        "list",
        "justify",
        "quote",
        "emotion",
        "image",
        "video",
        "table",
        "code",
        "undo",
        "redo",
      ];
      // 开启本地上传图片(上传的链接)
      (instance.config.uploadImgServer = "/goods"),
        // 限制上传图片格式
        (instance.config.uploadVideoAccept = [
          "jpg",
          "jpeg",
          "png",
          "gif",
          "bmp",
        ]);
      // 设置编辑器高度
      instance.config.zIndex = 1;
      // 设置配置器placeholder
      instance.config.placeholder = "请填写商品详情";
      // 配置编辑器显示颜色
      instance.config.colors = ["#000000", "#eeece0", "#1c487f", "#4d80bf"];

      Object.assign(instance.config, {
        onchange() {
          content.emit("getWangEditorValue",instance.txt.html());
        },
      });
      instance.create();
      instance.txt.html(props.content);
    });
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    return {
      editor,
    };
  },
};
</script>

<style lang="scss" scoped>
.wangeditor {
}
</style>
